<template>
  <el-select v-model="values"
             :placeholder="placeholder"
             :loading="loading"
             :remote-method="searchRemote"
             @change="inner_change"
             :multiple="multiple"
             filterable
             :remote="true"
             :reserve-keyword="multiple">
    <el-option v-for="c in types"
               :value="c.id"
               :key="c.id"
               :label="'['+c.platform.name+']'+c.type.name">
      <span class="left">{{ c.platform.name }}</span>
      <span class="right">{{ c.type.name }}</span>
    </el-option>
  </el-select>
</template>
<script>

  export default {
    name: 'project_search_category',
    props: {
      placeholder: {type: String, default: '分类名称'},
      value: {required: true},
      defaultValues: {
        type: Array,
        default() {
          return [];
        },
      },
      multiple: {default: false},
      change: Function,
    },
    data() {
      return {
        loading: false,
        values: null,
        types: [],
      };
    },
    methods: {
      async searchRemote(search) {
        this.loading = true;
        const res = await this.$asyncHttp.get('/api/spider/types', {params: {search}});
        this.types = res.data;
        this.loading = false;
      },
      inner_change() {
        this.$emit('input', this.values);
        this.$emit('change', this.values);
      },
    },
    mounted() {
      this.values = this.value;
      this.types = this.defaultValues;
    },
  };
</script>

<style scoped>
  .el-select {
    width: 100%;
    min-width: 200px;
  }
</style>